<template>
	<view v-if="instanceData" class="font-mono">
		<scroll-view class="w-instace" scroll-y show-scrollbar @scroll="scroll"
			:style="{ height: contentHeight + 'px' }">
			<view class="w-instace-header" v-if="instanceData.staterUser">
				<avatar :name="instanceData.staterUser.name" :src="instanceData.staterUser.avatar" showY></avatar>
				<view class="headers ml-2">
					<view class="headers-titles" >
						<view  style="margin-right: 10px;box-sizing: border-box;width:100%">{{ instanceData.processDefName }}</view>
						<uni-tag circle="true" :text="instanceData.status" :type="getProcTag(instanceData.result).type"
							inverted style="margin-top:15rpx"></uni-tag>
					</view>
					<view style="font-size: 32rpx;height: 60rpx;line-height: 60rpx;">{{ $t('flow.id')
						}}：{{ instanceData.instanceId }}</view>
				</view>
				<image v-if="instanceData.statusImg" :src="instanceData.statusImg" mode="aspectFill"></image>
			</view>
			<view class="w-instace-form">
				<form-render ref="wform" :jsonConf="instanceData.formItems" :config="instanceData.formConfig"
					v-model="instanceData.formData"></form-render>
			</view>
			<view class="w-instace-process">
				<view class="w-headers">
					<text class="w-titles">{{ $t('flow.approvalLog') }}</text>
				</view>
				<!-- 审批日志 -->
				<process-progress :progress="instanceData.progress" :status="instanceData.status"
					:result="instanceData.result"></process-progress>
			</view>
		</scroll-view>

		<view class="w-instace-action" v-if="instanceData.operationPerm || !instanceData.finishTime">
			<view class="w-action">
				<view @click="doAction('comment')">
					<uni-icons type="chat" size="34"></uni-icons>
					<view>{{ $t('flow.review') }}</view>
				</view>
				<view class="w-action-dis" @click="urging" v-if="!instanceData.finishTime">
					<uni-icons type="notification" size="34"></uni-icons>
					<view>{{ $t('flow.urgeSbTo') }}</view>
				</view>
				<view @click="showMore">
					<uni-icons type="more-filled" size="34"></uni-icons>
					<view>{{ $t('flow.more') }}</view>
				</view>
				<!-- 审批外面单独的两个按钮 -->
				<view class="w-action-main" v-show="instanceData.isMe">
					<button v-if="instanceData.operationPerm?.recall?.show" @click="doAction('recall')" style="padding:0 4rpx;">
						{{ $t('webAuto.Return') }}
						<!-- instanceData.operationPerm.recall.alisa -->
					</button>
					<button type="primary" v-if="instanceData.operationPerm?.agree?.show" @click="doAction('agree')" style="padding: 0 4rpx;">
						{{  $t('webAuto.agrea')}}
						<!-- instanceData.operationPerm.agree.alisa -->
					</button>
					<button type="primary" v-else-if="instanceData.operationPerm?.complete?.show"
						@click="doAction('complete')">
						{{ instanceData.operationPerm.complete.alisa }}
					</button>
				</view>
			</view>
		</view>
		<uni-popup ref="actionPopup" type="bottom" background-color="#fff">
			<view class="w-more-title">{{ $t('flow.selectApproval') }}</view>
			<view class="w-action-mores">
				<view v-if="instanceData.isMe && instanceData.operationPerm?.transfer?.show"
					@click="doAction('transfer')">
					<uni-icons type="staff" size="34"></uni-icons>
					<view>{{ $t('flow.handOver') }}</view>
				</view>
				<view v-if="instanceData.isMe && instanceData.operationPerm?.execute?.show"
					@click="doAction('execute')">
					<uni-icons type="staff" size="34"></uni-icons>
					<view>{{ $t('flow.copy') }}</view>
				</view>
				<view v-if="instanceData.isMe && instanceData.operationPerm?.refuse?.show" @click="doAction('refuse')">
					<uni-icons type="undo" size="34"></uni-icons>
					<view>{{ $t('flow.turnDown') }}</view>
				</view>
				<view v-if="instanceData.isMe && instanceData.operationPerm?.afterAdd?.show"
					@click="doAction('afterAdd')">
					<uni-icons type="personadd" size="34"></uni-icons>
					<view>{{ $t('flow.countersign') }}</view>
				</view>
				<view v-if="enableCancel" @click="doAction('cancel')">
					<uni-icons type="refreshempty" size="34"></uni-icons>
					<view>{{ $t('flow.revocation') }}</view>
				</view>
				<view @click="retrieve">
					<uni-icons type="refreshempty" size="34"></uni-icons>
					<view>{{$t('webAuto.Retrieve')}}</view>
				</view>
			</view>
			<button class="w-more-close" type="default" @click="actionPopup.close()">{{$t('webAuto.Close')}}</button>
		</uni-popup>
		<!-- 操作的弹框 -->
		<uni-popup ref="doActionPopup" :isMaskClick="false" type="bottom" background-color="#fff">
			<view class="w-more-title">{{ action.title }}</view>
			<view class="w-action-content">
				<!-- 加签  -->
				<view style="display: flex; align-items: center;"
					v-if="action.type === 'afterAdd' || action.type === 'transfer' || action.type === 'execute'">
					<text>{{ $t('flow.personnel') }}：</text>
					<view style="flex: 1;">
						<user-picker v-model="selectedUser" position="bottom" :height="action.type === 'execute'? 345 : 438" ></user-picker>
					</view>
				</view>
				<!-- 退回 -->
				<view v-else-if="action.type === 'recall'">
					<view style="display: flex; align-items: center;">
						<text>{{ $t('flow.rollback') }}：</text>
						<view style="flex: 1;display: flex;flex-direction: column;">
							<select-picker labelKey="nodeName" valueKey="nodeId" v-model="handerParams.targetNode" 
								:options="recallNodes" :height="438"/>
						</view>
					</view>
					<view class="checked">
						<uni-data-checkbox v-model="attachment.reExecute"
							:localdata="returnCkeck.ckecked"></uni-data-checkbox>
					</view>
				</view>

				<view style="display: flex; align-items: center;" v-if="activeTasks.length > 1">
					<text>{{ $t('flow.processing') }}：</text>
					<view style="flex: 1;">
						<select-picker :placeholder="$t('flow.handleTo')" valueKey="taskId" labelKey="name" :height="438"
							v-model="handerParams.taskId" :options="activeTasks" />
					</view>
				</view>
				<view class="w-choose-users"
					v-if="(action.type === 'agree' || action.type === 'complete' || action.type === 'refuse') && chooseUsers.length > 0">
					<text style="font-size: small;" >{{ $t('flow.followingFor') }}</text> 
					<view v-for="(cu, i) in chooseUsers" :key="i" class="w-choose-users-item" style="margin-top: 10rpx;">
						<text>{{cu.nodeName}}</text>
						<user-picker :formProps="{multiple: true}" v-model="chooseUsers[i].user" :height="438"
							position="bottom"></user-picker>
					</view>
				</view>
				<uni-easyinput type="textarea" v-model="handerParams.comment.text" :placeholder="action.tip"
					v-if="action.type != 'execute'" />
				<view style="margin: 32rpx 0;">
					<file-upload ref="attachFile" :formProps="{ maxSize: 10, placeholder: $t('flow.attachment') }"
						v-model="attachment.files" />
					<image-upload :formProps="{ maxSize: 10, placeholder: $t('flow.drawings') }"
						v-model="attachment.images" />
					<view style="margin-top: 32rpx;" v-if="showSignCt">
						<sign-panel position="bottom" v-model="handerParams.signature" />
					</view>
				</view>

			</view>
			<view class="w-action-confirm">
				<button type="default" @click="doActionClose">{{ $t('calendar.cancel') }}</button>
				<button type="primary" @click="submitAction">{{ $t('calendar.confirm') }}</button>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
import { computed, nextTick, onBeforeMount, reactive, ref, watch } from "vue";
import { getFormAndProcessProgress, approvalTask, getEnableRecallNodes, getTaskNodeSettings, getProcessRtrieval } from '@/api/task'
import { onLoad } from "@dcloudio/uni-app";
import { $nEmpty, debounce } from '@/utils/tool.js'
import Avatar from '@/components/Avatar.vue'
import FormRender from '@/components/FormRender.vue'
import processProgress from './processProgress.vue'
import { getUserSign } from "@/api/org";
import { getProcTag } from '@/utils/ProcessUtil.js'
import OrgPicker from "@/components/OrgPicker.vue";
import ImageUpload from "@/components/form/ImageUpload.vue";
import FileUpload from "@/components/form/FileUpload.vue";
import SignPanel from "@/components/form/SignPanel.vue";
import UserPicker from "@/components/form/UserPicker.vue";
import SelectPicker from '@/components/common/SelectPicker.vue'
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const wform = ref()
const nodeId = ref(null)
const instanceData = ref(null)
const selectedUser = ref([])
const recallNodes = ref([])
const actionPopup = ref();
const doActionPopup = ref();
const showSign = ref(false);
const attachFile = ref()
const action = ref({
	type: '',
	title: null,
	tip: null
})
//为其他节点选择指定的人员
const chooseUsers = ref([])
//审批参数
const attachment = reactive({
	files: [],
	images: [],
	reExecute: false
});
const handerParams = reactive({
	instanceId: null,
	taskId: null,
	comment: {
		text: null,
		attachments: []
	},
	formData: {},
	signature: null,
	action: null,
	updateSign: false,
	targetNode: null,
	targetUser: null,
	otherNodeUsers: {}
})

// 退回 添加的新参数
const returnCkeck = reactive({
	ckecked: [{
		text: t('webAuto.ReturnPrompt'),
		value: true
	}, {
		text: t('webAuto.GradualApproval'),
		value: false
	}]
})

onLoad((v) => {
	// 获取表单的值
	nodeId.value = v.nodeId
	getInstanceData(v.instanceId, v.nodeId)
	// 判断画面打开的方式
	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync();
	// 判断设备类型
	if (systemInfo.platform === 'windows' || systemInfo.platform === 'macos') {
		window.location.href = 'http://api.eletile.com:18081/#/task?nodeId=' + v.nodeId + '&instanceId=' + v.instanceId + '&uerId=' + v.uerId + '&open_in_default_browser=1';
	}
})

//当前登录的用户
const loginUser = uni.getStorageSync('loginUser')

const showSignCt = computed(() => {
	return showSign.value && (action.value.type === 'agree' || action.value.type === 'complete')
})

const enableCancel = computed(() => {
	try {
		return instanceData.value?.externSetting?.enableCancel
	} catch (e) {
		return false
	}
})

function isMyTask(task) {
	return !task.isFuture && task.user && task.user.id === loginUser.userId && !$nEmpty(task.finishTime)
}

//过滤本人下待处理的节点
const activeTasks = computed(() => {
	let tasks = [];
	(instanceData.value.progress || []).forEach(task => {
		if (task.users) {
			task.users.forEach(tk => {
				if (isMyTask(tk)) {
					tasks.push(tk)
				}
			})
		} else if (isMyTask(task)) {
			tasks.push(task)
		}
	})
	return tasks;
})

const contentHeight = computed(() => {
	const h = uni.getSystemInfoSync().windowHeight
	return instanceData.value.finishTime ? h : h - 72
})

//滚动延时去抖动
const scDebounce = debounce(() => uni.$emit('showFp'), 500)

watch(() => handerParams.taskId, () => {
	getTaskSet()
})


function getTaskSet() {
	getTaskNodeSettings(handerParams.taskId).then(rsp => {
		showSign.value = rsp.data.enableSign || false
		chooseUsers.value = rsp.data.chooseUsers || []
	}).catch(e => { })
}

function getInstanceData(instId, nodeId) {
	getFormAndProcessProgress(instId, nodeId).then(rsp => {
		instanceData.value = rsp?.data
		//设置状态图标
		switch (instanceData.value.result) {
			case 'PASS':
				instanceData.value.statusImg = '/static/image/agree.png'
				break
			case 'CANCEL':
				instanceData.value.statusImg = '/static/image/recall.png'
				break
			case 'REFUSE':
				instanceData.value.statusImg = '/static/image/refuse.png'
				break
		}
		instanceData.value.progress = splitByRecall(rsp.data.progress)
	})
}

//根据退回进行分段拆解
function splitByRecall(progress) {
	//提取分段时间点
	// let points = progress
	// 	.filter((p) => p.result === 'recall')
	// 	.map((p) => new Date(p.startTime).getTime())
	// if (points.length > 0) {
	// 	let blocks = [] //分段流程块组
	// 	let pointer = 0 //定点索引
	// 	points.push(new Date().getTime()+1000*60*60*24)
	// 	points.forEach((point) => {
	// 		let block = []
	// 		for (let i = pointer; i < progress.length; i++) {
	// 			let startTime = new Date(progress[i].startTime).getTime()
	// 			if (startTime <= point) {
	// 				block.push(progress[i])
	// 			} else {
	// 				pointer = i
	// 				break
	// 			}
	// 		}
	// 		//存段
	// 		blocks.push(block)
	// 	})
	// 	//按段处理
	// 	let processNodes = []
	// 	blocks.forEach((block) => processNodes.push(...mergeTask(block)))
	// 	return processNodes
	// }
	return mergeTask(progress)
}

function isMergeNode(n, pg) {
	//节点合并条件，满足以下条件就合并节点，目前规则是如果节点ID相同，且时间相差在2S内，则认为该俩节点
	return n.nodeId === pg.nodeId && (Math.abs(Date.parse(n.startTime) - Date.parse(pg.startTime)) <= 10000)
}

//合并活动节点，此处执行一段合并算法用来处理退回导致节点重合的问题
function mergeTask(progress) {
	let merge = []
	progress.forEach(pg => {
		//节点合并条件，满足以下条件就合并节点
		let i = merge.findIndex(n => isMergeNode(n, pg))
		if (i > -1) {
			//存在则合并到对象
			if (merge[i].users) {
				//已经合并过了
				merge[i].finishTime = pg.finishTime
				merge[i].users.push(pg)
				merge[i].result = getApprovalResult(merge[i], pg, pg.approvalMode)
				merge[i].comment = merge[i].comment.concat(pg.comment)
			} else {
				//没有就合并
				merge[i] = {
					agree: null,
					name: pg.name,
					isFuture: pg.isFuture,
					nodeType: pg.nodeType,
					approvalMode: pg.approvalMode,
					nodeId: pg.nodeId,
					result: getApprovalResult(merge[i], pg, pg.approvalMode),
					startTime: merge[i].startTime,
					finishTime: pg.finishTime,
					comment: merge[i].comment.concat(pg.comment),
					users: [merge[i], pg]
				}
				merge[i].comment = merge[i].comment.sort((a, b) => Date.parse(a.createTime) - Date.parse(b.createTime))
			}
		} else {
			merge.push(pg)
		}
	})
	return merge
}

function getApprovalResult(oldVal, newVal, mode) {
	if (mode === 'OR') {
		return newVal.result ? newVal.result : oldVal.result
	} else if (mode === 'AND') {
		let rs = oldVal.result || newVal.result
		return rs === 'recall' ? 'recall' : rs
	} else {
		return newVal.result
	}
}

function showMore() {
	actionPopup.value.open()
}

function doActionClose() {
	attachFile.value.show(false)
	doActionPopup.value.close()
}

function urging() {
	uni.showModal({
		title: '催办确认',
		content: '您确认要提醒流程中人员尽快处理任务？',
		success: function (res) {
			if (res.confirm) {
				uni.showToast({
					icon: 'none',
					title: '该功能暂未实现哈😘'
				})
			} else if (res.cancel) {

			}
		}
	});

}

function doAction(type) {
	handerParams.taskId = getTask()
	selectedUser.value = []
	handerParams.targetUser = null
	handerParams.comment.text = ''
	handerParams.signature = null
	handerParams.comment.attachments = []
	attachment.files.length = 0
	attachment.images.length = 0
	switch (type) {
		case 'comment':
			action.value = {
				type: type,
				title: t('webAuto.AddComment'),
				tip: t('webAuto.CommentContent')
			}
			break;
		case 'transfer':
			action.value = {
				type: type,
				title: t('webAuto.TransferProcess'),
				tip: t('webAuto.TransferOpinions'),
			}
			break;
		case 'afterAdd':
			action.value = {
				type: type,
				title: t('webAuto.AddSignature'),
				tip: t('webAuto.AddSignatureComments')
			}
			break;
		case 'recall':
			action.value = {
				type: type,
				title: t('webAuto.ReturnProcess'),
				tip: t('webAuto.ReturnOpinion')
			}
			getEnableRecallNode()
			break;
		case 'cancel':
			action.value = {
				type: type,
				title: t('webAuto.RevocationProcess'),
				tip: t('webAuto.ReasonRrevocation')
			}
			break;
		case 'agree':
			action.value = {
				type: type,
				title: t('webAuto.ApprovalApproved'),
				tip: t('webAuto.ApprovalOpinion')
			}
			break;
		case 'execute':
			action.value = {
				type: type,
				title: t('webAuto.CCprocess'),
				// tip: '抄送意见'
			}
			break;
		case 'complete':
			action.value = {
				type: type,
				title: t('webAuto.SubmitProcessing'),
				tip: t('webAuto.HandlingOpinions')
			}
			break;
		case 'refuse':
			action.value = {
				type: type,
				title: t('webAuto.ApprovalRejected'),
				tip: t('webAuto.ApprovalOpinion')
			}
			break;
	}
	wform.value.validate(formValid => {
		if (!formValid && type!='recall') {
			uni.showToast({
				icon: 'none',
				title: t('webAuto.Refinecontent')
			})
		}else{
			doActionPopup.value.open()
			//使文件选择生效
			nextTick(() => {
				attachFile.value.show()
				attachFile.value.clear()
			})
		}
	})

}

function loadBeforeSign() {
	getUserSign().then(rsp => {
		if (rsp.data === '') {
			uni.showToast({
				icon: 'none',
				title: t('webAuto.NoSignature')
			})
		} else {
			handerParams.signature = rsp.data
		}
	})
}
//获取要处理的任务id
function getTask() {
	if ($nEmpty(handerParams.taskId)) {
		return handerParams.taskId
	} else if (activeTasks.value.length > 0) {
		return activeTasks.value[0].taskId
	} else if (action.value.type === 'cancel') {
		const pg = instanceData.value.progress || [];
		for (let i = 0; i < pg.length; i++) {
			if (pg[i].users) {
				for (let j = 0; j < pg[i].users.length; j++) {
					if (!$nEmpty(pg[i].users[j].finishTime)) {
						return pg[i].users[j].taskId
					}
				}
			} else {
				if (!$nEmpty(pg[i].finishTime)) {
					return pg[i].taskId
				}
			}
		}
	}
	return null
}

function getEnableRecallNode() {
	getEnableRecallNodes(instanceData.value.instanceId, getTask()).then(rsp => {
		recallNodes.value = rsp.data
	}).catch(err => {
		uni.showToast({
			icon: 'none',
			title: t('webAuto.Failednode')
		})
	})
}

function submitAction() {
	console.log('selectedUser.value',selectedUser.value)
	
	handerParams.instanceId = instanceData.value.instanceId
	handerParams.action = action.value.type
	handerParams.taskId = getTask()
	handerParams.formData = instanceData.value.formData
	handerParams.comment.attachments = [...attachment.files, ...attachment.images]
	handerParams.otherNodeUsers = {}
	handerParams.reExecute = attachment.reExecute,// 退回 是否逐级审批
	chooseUsers.value.forEach(nd => {
		handerParams.otherNodeUsers[nd.nodeId] = nd.user?.map(u => u.id)
	})
	// 表单必填校验
	if ((action.value.type === 'afterAdd' || action.value.type === 'transfer' || action.value.type === 'execute') && !selectedUser.value.length > 0) {
		uni.showToast({
			icon: 'none',
			title: t('webAuto.setPersonnel')
		})
	} else if (action.value.type === 'recall' && !$nEmpty(handerParams.targetNode)) {
		uni.showToast({
			icon: 'none',
			title: t('webAuto.SelectFallbackNode')
		})
	} else if (showSignCt.value && !$nEmpty(handerParams.signature)) {
		uni.showToast({
			icon: 'none',
			title: t('webAuto.signBeforeSubmitting')
		})
	} else {
		// 抄送用的
		if (action.value.type === 'execute') {
			handerParams.ccUsers = [selectedUser.value?.[0]?.id]
		}
		handerParams.targetUser = selectedUser.value?.[0]?.id
		approvalTask(handerParams).then(rsp => {
			uni.showToast({
				icon: 'success',
				title: t('webAuto.ProcessingSuccessful')
			})
			actionPopup.value.close()
			doActionPopup.value.close()
			if (action.value.type === 'comment') {
				getInstanceData(instanceData.value.instanceId, nodeId.value)
			} else {
				uni.reLaunch({
					url: '/pages/workspace/workspace'
				})
			}
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		})
		return
	}
}

function scroll() {
	// #ifdef APP-VUE
	uni.$emit('wv:scorll');
	// #endif
}

// 取回
const retrieve = () => {
	let targetNode = uni.getStorageSync('nodeId')
	getProcessRtrieval({
		instanceId: instanceData.value.instanceId,
		targetNode: targetNode
	}).then(res => {
		uni.showToast({
			icon: 'none',
			title: res.data
		})
		// 返回待办画面
		setTimeout(() => {
			uni.navigateBack('/pages/workspace/workspace')
		}, 100)
	}).catch(err => {
		uni.showToast({
			icon: 'none',
			title: t('webAuto.RetrievalFailed') + err.data
		})
	})
}
</script>

<style lang="less" scoped>
page {
	background-color: #F4F5F7;
}

:deep(.w-instace-form) {
	.w-form-item {
		margin-bottom: 0;
		padding-bottom: 16rpx;
	}

	.w-form-item-r {
		margin-bottom: 16rpx;
	}
}

.w-instace {
	font-size: 32rpx;

	.w-instace-header,
	.w-instace-form,
	.w-instace-process {
		margin: 32rpx 0;
		padding: 32rpx 16rpx;
		background-color: white;
	}

	.w-instace-header {
		margin-top: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;


		image {
			position: absolute;
			z-index: 2;
			width: 160rpx;
			height: 160rpx;
			right: 150rpx;
			bottom: 0rpx;
		}
	}

	:deep(.w-instace-form) {
		margin: 140rpx 0 0 0;
		padding: 32rpx 16rpx;

		.w-form-item-r {
			padding-bottom: 0;
			font-size: 26rpx;

			.w-form-title :last-child {
				font-size: 26rpx !important;
				color: #848484;
			}

		}
	}

	.w-instace-header {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		width: 100%;
		box-sizing: border-box;
		padding-right: 20rpx;

		.uni-tag {
			position: relative;
			left: 0;
			top: -5px;
			height: 50%;
			overflow: hidden;
			padding: 5rpx 3rpx !important;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 20rpx !important;
			text-align: center;
			width: 130rpx !important;
			z-index: 9999;
		}
	}
}

.w-instace-action {
	width: 100%;
	height: 144rpx;
	background-color: #EFEFEF;
	display: flex;
	justify-content: space-between;

	.w-action {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
		text-align: center;
		padding: 0 32rpx;


		.w-action-main {
			width: 40%;
			display: flex;
			right: 32rpx;

			&>button {
				width: 128rpx;
				font-size: 32rpx
			}
		}
	}
}

.w-action-mores {
	display: flex;
	justify-content: space-between;
	padding: 64rpx;
	font-size: 32rpx;

	&>view {
		text-align: center;
	}
}

.w-more-close {
	background-color: #E8E8E8 !important;
	border: none !important;
	margin: 0 32rpx 32rpx 32rpx;
	border-radius: 48rpx;
	color: #848484;
}

.w-more-title {
	font-size: 29rpx;
	text-align: center;
	margin-top: 16rpx;
	color: #848484;
}

.w-action-content {
	padding: 32rpx;
}

.w-action-confirm {
	display: flex;
	padding-bottom: 32rpx;

	button {
		width: 40%;
	}
}

.w-headers {
	height: 80rpx;
	width: 100%;

	.w-titles {
		color: #409eff;
		font-size: 32rpx;
		padding: 0 30rpx;
		position: relative;
	}
}

.w-choose-users {
	margin-bottom: 20rpx;
}

.w-choose-users-item {
	font-size: small;
	margin-bottom: 5rpx;
	border-radius: 10rpx;
	padding: 5rpx;
	background-color: #F7F7F7;

	&>text {
		color: #848484;
	}
}

.w-titles::before {
	content: '';
	width: 130rpx;
	border-bottom: 4rpx solid #409eff;
	position: absolute;
	bottom: -10rpx;
	left: 30rpx;
}

.headers {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	max-height: 14rpx;
	min-height: 120rpx;

	.headers-titles {
		flex: 1;
		display: flex;
		flex-direction: row;
		font-size: 33rpx;
		box-sizing: border-box;
		line-height: 60rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

// 退回
.checked {
	width: 100%;
	height: 160rpx;
}
</style>
